<template>
    <!-- 插入i-form-item -->
    <div style="display:flex;height: 50px;" id="searchBox" ref="divDom">
        <div class="form-item-group">
            <slot></slot>
        </div>
        <!-- 查询、重置按钮 -->
        <div style="flex:2;">
            <div style="position: relative;">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="info" @click="reset">重置</el-button>
                <transition>
                <el-button link type="primary" style="width: 30px;" @click="changeShow" v-blur>
                    {{ word }}
                    <i :class="[showAll ? 'fa fa-caret-down': 'fa fa-caret-up']" class="ml-1"></i>
                </el-button>
                </transition>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref,computed,onMounted } from 'vue'
const showAll = ref(true)
let word = computed(()=>{
    return showAll.value ? '展开' : '收起'
})
var divDom = ref(null)
const emit = defineEmits(["reset","search"])
const props = defineProps({
    searchForm: {
        type: Object,
        default: {}
    }
})
const changeShow = ()=>{
    showAll.value = !showAll.value
    console.log('showAll.value=', showAll.value);
    // 收起，将searchBox区域高度变小
    if(showAll.value){
        divDom.value.style.height = 50 + "px"
    }
    // 展开，将searchBox区域高度变大
    else{
        divDom.value.style.height = 'auto'
    }
}
// 查询
const search = () => {
    console.log('searchForm=', props.searchForm)
}
const reset = () => {
    emit('reset', {})
}
</script>
<style scoped>
#searchBox{
    overflow: hidden;
}
.form-item-group{
    flex:10;
    display:flex;
    /* background-color: aqua; */
    flex-direction:row;
    flex-wrap: wrap;
 }
</style>